<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .cart-list {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 10px;
        width: 200px;
        /*height: 400px;*/
        border: 1px solid #ddd;
        
    }
    button{
    	position: relative;
    }
    .cart-list h4 {
        margin: 0;
        padding-bottom: 5px;
        border-bottom: 1px solid #ddd;
    }
    
    .cart-list img {
        width: 60px;
    }

    .cart-list li{position:relative;}
    .cart-list .btn-close{position:absolute;top:0;right:0;padding:5px;}
    .cart-list .btn-close:hover{background-color:#f00;color:#fff;}
    
    .goods-list img {
        width: 200px;
    }
    </style>
    <script src="../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(function(){
    		
    		 $('.goods-list button').click(function(){
//  		 	_event = _event || window.event;
//  		 	var left = $(this).offset().left;
//  		 	var top = $(this).offset().top;
    		    
    		 	var $li = $(this).parents('li').clone(true, false);
    		 	$li.append('<span class="btn-close">x</span>');
    		 	$li.css({"position":"relative","left":$(this).offset().left-1030, "top":$(this).offset().top-300})
    		 	
    		 	
    		 	$li.animate({left:$('.cart-list').offset().left-1030,top:$('.cart-list').offset().top},400)
    		 	$li.appendTo('.cart-list ul')
    		 });
    		 
    		 $('.cart-list').on('click', '.btn-close', function (e) {
		            
		            $(this).closest('li').remove();
		           
		            e.stopPropagation();
		            
		            e.preventDefault();
		
		            return false;
		        });
    	});
    </script>
	</head>
	<body>
		<div class="goods-list">
        <h4>产品列表</h4>
        <ul>
            <li><img src="day3/images/g1.jpg">
                <p>
                    <button>添加到购物车</button>
                </p>
                <p>亚瑟士ASICS跑步鞋2015春夏新款运动鞋男款避震跑鞋KAYANO T4H2N-9001 橙色/白色 42</p>
            </li>
            <li><img src="day3/images/g2.jpg">
                <p>
                    <button>添加到购物车</button>
                </p>
                <p>亚瑟士ASICS运动鞋2015春夏新款跑步鞋女鞋稳定跑鞋KAYANO T4H7N-0701 黄色/白色 37.5</p>
            </li>
            <li><img src="day3/images/g3.jpg">
                <p>
                    <button>添加到购物车</button>
                </p>
                <p>亚瑟士ASICS跑步鞋春夏透气稳定女款跑鞋 KAYANO T4N5N-3591 玫红色/黑色 37.5</p>
            </li>
            <li><img src="day3/images/g4.jpg">
                <p>
                    <button>添加到购物车</button>
                </p>
                <p>亚瑟士ASICS高帮运动休闲鞋男鞋运动鞋DOUBLEH54XJ-5050 黑色/黑色 40.5</p>
            </li>
            <li><img src="day3/images/g5.jpg">
                <p>
                    <button>添加到购物车</button>
                </p>
                <p>Onitsuka Tiger运动休闲鞋女COLORADO D4S6N-1850 珊瑚色/淡灰色 37.5</p>
            </li>
        </ul>
    </div>
    <div class="cart-list">
        <h4>购物车列表</h4>
        <ul>
        </ul>
    </div>
	</body>
</html>
